<template>
	<div class="zoom" ref="imgBox">
		<div class="small">
			<!-- 展示图 -->
			<div
				class="small-box"
				@mouseover="isShow = true"
				@mousemove="handelMove($event)"
				@mouseout="isShow = false"
			>
				<img :src="currUrl" alt="" />
				<div
					class="mask"
					v-show="isShow"
					:style="{ left: maskL, top: maskT }"
				></div>
			</div>
			<!-- 图片列表 -->
			<div class="small-list">
				<img
					:src="url"
					v-for="(url, i) in imgs.filter((a, i) => (i <= 5) & (i > 0))"
					:key="url"
					alt=""
					@click="currInd = i"
				/>
			</div>
		</div>
		<!-- 放大区 -->
		<div class="big-box" v-show="isShow">
			<img :src="currUrl" alt="" :style="{ left: imgL, top: imgT }" />
		</div>
	</div>
</template>
<script>
export default {
	name: "ZoomImage",
	props: ["imgs"],
	data() {
		return {
			currInd: 0, //默认被触发的索引
			isShow: false, //是否显示
			// 放大镜遮罩定位
			maskL: 0,
			maskT: 0,
			// 大图定位
			imgT: 0,
			imgL: 0,
		};
	},
	computed: {
		// 当前被触发的图片
		currUrl() {
			// console.log(this.imgs);
			return this.imgs[this.currInd];
		},
	},
	methods: {
		// 鼠标移动
		handelMove(e) {
			// 鼠标页面定位
			let mX = e.pageX;
			let mY = e.pageY;
			// console.log(mX, mY);
			//当前模块页面定位
			let boxLeft = this.$refs.imgBox.offsetLeft;
			let boxTop = this.$refs.imgBox.offsetTop;
			// console.log(boxLeft, boxTop);
			// 计算移动距离
			let xMove = mX - boxLeft - 100;
			let yMove = mY - boxTop - 100;
			// console.log(xMove, yMove);
			// 边界
			if (xMove <= 0) {
				xMove = 0;
			}
			if (yMove <= 0) {
				yMove = 0;
			}
			if (xMove >= 200) {
				xMove = 200;
			}
			if (yMove >= 200) {
				yMove = 200;
			}
			// 设置遮罩层
			this.maskL = xMove + "px";
			this.maskT = yMove + "px";
			// 放大位置 2==大图能移动的距离/遮罩能移动的距离
			this.imgT = -yMove * 2 + "px";
			this.imgL = -xMove * 2 + "px";
		},
	},
};
</script>
<style scoped lang="scss">
.zoom {
	width: 400px;
	position: relative;
}

.small {
	.mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 200px;
		height: 200px;
		background: rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(0, 0, 0, 0.5);
	}
	.small-box {
		border: 1px #f4f4f4 solid;
		margin-bottom: 5px;
		position: relative;
	}
	.small-list {
		width: 400px;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		img {
			width: 74px;
			height: 74px;
			margin-right: 5px;
			border: 1px solid #eee;
		}
	}
}
.big-box {
	position: absolute;
	left: 400px;
	top: 0;
	width: 400px;
	height: 400px;
	overflow: hidden;
	border: 1px solid #ddd;
	background: #eee;
	z-index: 99999;
	img {
		width: 800px;
		height: 800px;
		position: absolute;
		left: 0;
		top: 0;
	}
}
</style>
